<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01_姓名案例_插值语法</title>
    <script src="../js/vue.js"></script>
</head>
<body>
  <div id="root">
    姓:<input type="text" v-model="firstname"><br>
    名:<input type="text" v-model="lastname"><br>
<!--    需求：只需要姓的前三位  如果需要很多的操作的话 就不推荐了-->
    全名:<span>{{firstname.slice(0,3)}}-{{lastname}}</span>
  </div>
  <script>
    Vue.config.devtools = true;
    Vue.config.productionTip = false;
    const vm = new Vue({
      el:'#root',
      data:{
        firstname:'张',
        lastname:'三'
      }
    });
  </script>
</body>
</html>